<!-- 订单详情 -->
<template>
    <div class="rem-dialog-con order-form-box">
        <el-form label-width="150px">
            <el-row>
                <el-col :span="24" class="form-title">
                    <div class="form-title-con">
                        订单信息
                    </div>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="订单来源：">
                        <span>{{this.orderDetailModel.order_source_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="订单状态：">
                        <span>{{this.orderDetailModel.order_status_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="订单号：">
                        <span>{{this.orderDetailModel.order_number}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="订单生成时间：">
                        <span>{{this.orderDetailModel.order_time}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="竞价方式：">
                        <span>{{this.orderDetailModel.bidding_mode_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="发布期限：">
                        <span>T+{{this.orderDetailModel.trade_appoint_day}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="贴现利率：">
                        <span>{{this.orderDetailModel.order_rate}}%</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="每十万加：">
                        <span>{{this.orderDetailModel.order_every_plus}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="平台服务费(汇票豆)：">
                        <span>{{this.orderDetailModel.commission}}个</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="贴现金额：">
                        <span>{{this.orderDetailModel.order_total_price}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="form-title">
                    <div class="form-title-con">
                        票据信息
                    </div>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="票据号：">
                        <span>{{this.orderDetailModel.bill_number}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="票面金额：">
                        <span>{{this.orderDetailModel.bill_sum_price}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="承兑机构：">
                        <span>{{this.orderDetailModel.acceptor_type_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="承兑人：">
                        <span>{{this.orderDetailModel.acceptor_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="汇票到期日：">
                        <span>{{this.orderDetailModel.bill_deadline_time}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="背书次数：">
                        <span>{{this.orderDetailModel.endorsement_number}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="瑕疵情况：">
                        <span>{{formatArr}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="bill_img_box">
                    <div>
                        <div class="bill_detail_img">
                            <!--<img :src="this.orderDetailModel.bill_front_photo_path" alt="">-->
                            <ImageZoom :width='240' :height='148' :image="this.orderDetailModel.bill_front_photo_path" v-if="orderDetailModel.bill_front_photo_path != '' && orderDetailModel.bill_front_photo_path != undefined && orderDetailModel.bill_front_photo_path != null"></ImageZoom>
                        </div>
                        <div>票据正面</div>
                    </div>
                    <div>
                        <div class="bill_detail_img">
                            <!--<img :src="this.orderDetailModel.bill_front_photo_path" alt="">-->
                            <ImageZoom :width='240' :height='148' :image="this.orderDetailModel.bill_back_photo_path1" v-if="orderDetailModel.bill_back_photo_path1 != '' && orderDetailModel.bill_back_photo_path1 != undefined && orderDetailModel.bill_back_photo_path1 != null"></ImageZoom>
                        </div>
                        <div>票据背书面1</div>
                    </div>
                    <div>
                        <div class="bill_detail_img">
                            <!--<img :src="this.orderDetailModel.bill_front_photo_path" alt="">-->
                            <ImageZoom :width='240' :height='148' :image="this.orderDetailModel.bill_back_photo_path2" v-if="orderDetailModel.bill_back_photo_path2 != '' && orderDetailModel.bill_back_photo_path2 != undefined && orderDetailModel.bill_back_photo_path2 != null"></ImageZoom>
                        </div>
                        <div>票据背书面2</div>
                    </div>
                </el-col>
                <el-col :span="24" class="form-title">
                    <div class="form-title-con">
                        交易信息
                    </div>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="出票人：">
                        <span>{{this.orderDetailModel.drawer_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="出票账户：">
                        <span>{{this.orderDetailModel.drawer_account_number}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="出票账户银行：">
                        <span>{{this.orderDetailModel.drawer_account_bank}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="关联中介：">
                        <span>{{this.orderDetailModel.drawer_simple_enterprise_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="联系人：">
                        <span>{{this.orderDetailModel.drawer_contract_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="联系方式：">
                        <span>{{this.orderDetailModel.drawer_contract_phone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left" style="border-top: 1px solid #D2D2D6">
                    <el-form-item label="收票人：">
                        <span>{{this.orderDetailModel.receiver_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left" style="border-top: 1px solid #D2D2D6">
                    <el-form-item label="收票账户：">
                        <span>{{this.orderDetailModel.receiver_account_number}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="text_left">
                    <el-form-item label="收票账户银行：">
                        <span>{{this.orderDetailModel.receiver_account_bank}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="联系人：">
                        <span>{{this.orderDetailModel.receiver_contract_name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="text_left">
                    <el-form-item label="联系方式：">
                        <span>{{this.orderDetailModel.receiver_contract_phone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="form-title" style="margin-top: 16px;">
                    <div class="form-title-con">
                        交易进度
                    </div>
                </el-col>
                <el-col :span="24" class="business_box">
                    <div class="transaction-progess-box">
                        <div style="height: 200px;" class="transaction-progess">
                            <el-steps direction="vertical" :active="this.orderStep">
                                <el-step title="达成交易"></el-step>
                                <el-step title="买方付款"></el-step>
                                <el-step title="卖方背书"></el-step>
                                <el-step title="核验解冻"></el-step>
                            </el-steps>
                        </div>
                        <div class="transaction-right-help">
                            <p><span class="transaction-right-span-time">{{this.orderTime.order_status_804}}</span></p>
                            <p><span class="transaction-right-span-time">{{this.orderTime.order_status_806}}</span></p>
                            <p><span class="transaction-right-span-time">{{this.orderTime.order_status_807}}</span></p>
                            <p class="transaction-right-help-p5"><span class="transaction-right-span-time">{{this.orderTime.order_status_808}}</span></p>
                        </div>
                    </div>
                    <div class="order_operator_record">
                        <div class="order_record_title">备注信息</div>
                        <ul>
                            <li v-for="item in this.orderDetailModel.operator_time_map" :key="item.id">
                                <span class="progress_time">{{item.request_time}}</span><span :class="{'remind_color': item.username == '买方用户'}" style="margin-left: 12px;" class="des_info">{{item.username}}&nbsp;反馈&nbsp;{{item.description}}</span>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import ImageZoom from '@/component/common/ImageZoom.vue'
    @Component({
        components: {
            ImageZoom
        }
    })
    export default class OrderDetail extends Vue {
        @Prop() orderDetailModel: any;
        @Prop() orderStep: number;
        @Prop() orderTime: any;
        get formatArr () {
            return this.orderDetailModel.bill_flaw_names ? this.orderDetailModel.bill_flaw_names.join('，') : ''
        }
    }
</script>

<style lang="scss" scoped>
    .order_operator_record {
        margin-left: 50px;
    }
    .progress_time {
        color: $__color-label;
    }
    .des_info {
        color: $__color-show;
    }
    .remind_color {
        color: $__color-remind !important;
    }
    .order_operator_record {
        ul {
            li {
                list-style: none;
                text-align: left;
                height: 26px;
                line-height: 26px;
                &:before{
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background: $__color-primary;
                    border-radius: 50%;
                    margin-right: 4px;
                    margin-bottom: 2px;
                }
            }
        }
    }
    .order_record_title {
        text-align: left;
        padding-left: 20px;
        color: $__color-label;
    }
    .business_box {
        display: flex;
        justify-content: flex-start;
        padding-left: 50px;
    }
    .transaction-progess-box {
        background: #fff;
        border: 1px solid #D2D2D6;
        border-radius: 4px;
        padding-top: 15px;
    }
    .transaction-right-help p {
        line-height: 2px;
        padding-bottom: 38px;
        text-align: center;
        width: 110px;
    }
    .transaction-right-help-p5 {
        padding-top: 3px;
    }
    .transaction-right-span-time {
        color: #999;
        font-size: 14px;
    }
    .remark_text {
        margin-top: 12px;
    }

</style>